<template>
    <datetime-frame :visible="visible" @click="onHide" ref="edtframe">
        <template v-slot:default="sps">
        <base-datetime
            :theme="sps.theme"
            :weekText="sps.weekText"
            :importants="sps.importants"
            :langs="sps.langs"
            :clear="sps.clear"
            :now="sps.now"

            :mode="mode"
            :umode="umode"
            :format="format"
            :value="start"
            :min="minDo"
            :max="maxDo"

            @back="onModeShift(pMode)"
            @pick="onPick"
            @mode-shift="onModeShift"
            ref="edt"/>
        </template>
        <template v-slot:footer="fps">
            <footer-bar 
                @time-navigate="onModeShift(Mode.time)"
                @done="onPick(start,true)"
                @now="onPick(new Date(),true)"
                @clear="onPick(undefined,true)"
                :now="fps.now"
                :clear="fps.clear"
                :langs="fps.langs" 
                :theme="fps.theme"
                :vDo="sDo"
                :min="minDo"
                :max="maxDo"
                :format="format"
                :umode="umode" 
                :mode="mode"
                />
        </template>
    </datetime-frame>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import Evt from 'ph-evt'
import { PhDatepickerOpt } from './index.type'
import DatetimeFrame from './datetime-frame.vue'
import BaseDatetime from './date-time.vue'
import FooterBar from './footer.vue'
import { destructDate, parseDate } from '../../shared/datetime'
import { Format, Mode } from './config'
export default defineComponent({
    components:{
        DatetimeFrame,
        BaseDatetime,
        FooterBar
    },
    setup() {
        const evt = new Evt()

        const edtframe = ref<InstanceType<typeof DatetimeFrame>>()
        const ename = "pick"
        const visible = ref(false)

        const start = ref<Date>(new Date())
        let pMode = Mode.date
        const mode = ref(Mode.date)
        const umode = ref(Mode.datetime)
        const format = ref(Format.datetime)
        const max = ref<string>()
        const min = ref<string>()

        const minDo = computed(()=>{
            return min.value?destructDate(parseDate(min.value,format.value)):false
        })
        const maxDo = computed(()=>{
            return max.value?destructDate(parseDate(max.value,format.value)):false
        })

        const sDo = computed(()=>{
            return destructDate(start.value)
        })

        watch(()=>mode.value,(v:number)=>{
            if(v!==Mode.time)pMode = v
        })

        const setupUMode = (type:string)=>{
            switch(type){
                case "datetime":
                    umode.value = Mode.datetime
                    mode.value = Mode.date
                    break
                case "date":
                    mode.value = umode.value = Mode.date
                    break;
                case "year":
                    mode.value = umode.value = Mode.year
                    break
                case "month":
                    mode.value = umode.value = Mode.month
                    break
                case "time":
                    mode.value = umode.value = Mode.time
                    break
                default:
                    umode.value = Mode.datetime
                    mode.value = Mode.date
            }
        }
        const notify = (v:Record<string,number>|unknown)=>{
            evt.emit(ename,v)
            onHide()
        }
        const onModeShift = (m:number)=>mode.value = m
        const onPick = (v:Date|undefined,done:boolean)=>{
            if(v)
            start.value = v
            if(done){
                if(!v)return notify(undefined)
                const {yyyy,MM,dd,hh,mm,ss} = destructDate(v) 
                switch(umode.value){
                    case Mode.datetime:
                        return notify({yyyy,MM,dd,hh,mm,ss})
                    case Mode.date:
                        return notify({yyyy,MM,dd})
                    case Mode.month:
                        return notify({yyyy,MM})
                    case Mode.year:
                        return notify({yyyy})
                    case Mode.time:
                        return notify({hh,mm,ss})
                }
            }
        }
        const onHide = ()=>{
            visible.value = false
            edtframe.value?.restore()
            evt.off(ename)
        }
        const show = (s:string,opt:PhDatepickerOpt)=>{
            console.log(s,opt)

            evt.off(ename)
            edtframe.value?.save(opt)
            setupUMode(opt.mode)
            visible.value = true
            format.value = opt.format||Format[umode.value]

            max.value = opt.max
            min.value = opt.min

            start.value = s?parseDate(s,format.value):new Date()
            return {
                done(fn:()=>void){
                    evt.off(ename)
                    evt.once(ename,fn)
                }
            }
        }
        return {
            Mode,
            edtframe,
            visible,
            show,
            start,
            minDo,
            maxDo,
            sDo,
            mode,
            umode,
            format,
            onPick,
            onHide,
            onModeShift
        }
    }
})
</script>